<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HMLT</title>
<style type="text/css" media="all">
* { padding:0; margin:0; }
#box {position:absolute;left:0px;top:0;width:100px;height:100px;background:purple;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
window.onload = function(){
	var style = {
		'key_trans' : function(key){
			return  key.replace(/\-(\w)/g, function($, $1){ return $1.toUpperCase(); });
		},
		'get' : function(el, key, return_int){
			var val;
			if( document.defaultView ){
				val = document.defaultView.getComputedStyle(el, null).getPropertyValue(key);
			}else{
				val = el.currentStyle[this.key_trans(key)];
				val = (val==='medium') ? '' : val;
			}
			val = val || 0;
			return return_int ? parseInt(val, 10) : val;
		},
		'set' : function(el, css){
			for(var key in css){
				el.style[this.key_trans(key)] = css[key];
			}
		}
	};
	window.requestAnimationFrame = window.requestAnimationFrame ||
								window.mozRequestAnimationFrame ||
								window.webkitRequestAnimationFrame ||
								window.msRequestAnimationFrame ||
								window.oRequestAnimationFrame ||
								function(callback){setTimeout(callback, 1000/60);};
	window.cancelAnimationFrame = window.cancelAnimationFrame ||
						window.webkitCancelAnimationFrame ||
						window.mozCancelAnimationFrame ||
						window.oCancelAnimationFrame ||
						function(id){window.clearTimeout(id);};
	var animate = function(elem, name, to, time){
		time = time || 800;
		var stl = elem.style,
			from = parseFloat(style.get(elem, name)),
			startTime = (new Date()).getTime();
		var go = function(rts){
			var progress = rts;
			if(!rts){
				rts = (new Date()).getTime();
				progress = rts - startTime;
			}
			if(progress>=time){
				stl[name] = to;
				stl['top'] = '20px';
				console.log(elem.style.cssText);
				return false;
			}
			var now = (parseFloat(to)-from)*(progress/time);
			stl[name] = now.toFixed() + 'px';
			requestAnimationFrame(go);
		};
		requestAnimationFrame(go);
	};
	animate(document.getElementById('box'), 'left', '100px', 1000);
};
</script>
</body>
</html>
